<?php

#################################################################
#								HTML
#################################################################

/**
 * Checkbox component registed as 'element/checkbox' 
 * 
 * $vars['name']
 * $vars['id']
 * $vars['class']
 * $vars['value']
 * $vars['checked']
 * $vars['label']
 * $vars['onClick']
 */

if($_CONTEXT=='HTML'){

	$_CSS_STACK->push(blg_get_site_url().'element/checkbox.css', TRUE);
	$_JS_STACK->push(blg_get_site_url().'element/checkbox.js', TRUE);

	//PREPARE DEFAULTS		
	if(empty($vars['id']))
		$vars['id']= 'checkbox_'.random_string(12);
		
	if(!is_bool($vars['checked']))
		$vars['checked']= FALSE;	

	if(empty($vars['value']))
		$vars['value']= 'on';
		
	$vars['label']= trim($vars['label']);

	$class= 'blg_checkbox';
		
	//BUILD	
	$checkbox = '<div class="blg_checkbox_container '.($vars['checked']?'blg_checkbox_checked':'blg_checkbox_unchecked').'" referer="'.$vars['id'].'">';
	
	$checkbox.= '<input type="checkbox" id="'.$vars['id'].'" blg_id="'.$vars['id'].'" value="'.$vars['value'].'"';
	
	if(!empty($vars['class']))
		$checkbox.= ' class="'.$class.' '.$vars['class'].'"';
	else
		$checkbox.= ' class="'.$class.'"';	
		
	if(!empty($vars['name']))
		$checkbox.= ' name="'.$vars['name'].'"';
		
	if($vars['checked']===TRUE)
		$checkbox.= ' checked="checked"';		
		
	$checkbox.= ' /><img class="blg_checkbox_img" src="'.blg_get_site_url().'_graphics/default/structure/pixel.png"></div>';
	
	if(!empty($vars['label']))
		$checkbox.= '<span class="blg_checkbox_label" type="checkbox" referer="'.$vars['id'].'">'.$vars['label'].'</span>';
	
	echo $checkbox;
	
	/****************** APPEND JS CODE ********************/
	
	if(!empty($vars['onClick'])){
		$code="
			$('#".$vars['id']."').bind('click', function(){
				".add_trainling_slash($vars['onClick'], ';')."
			});
		";

		$_JS_CODE->append($code, ON_DOC_READY);
	}	
}
#################################################################
#								JS
#################################################################
elseif($_CONTEXT=='JS'){ ?>

function blg_print_checkbox_img(checkbox){
	if(checkbox.is(':checked')){
		checkbox.parent('.blg_checkbox_container').removeClass('blg_checkbox_checked');
		checkbox.parent('.blg_checkbox_container').addClass('blg_checkbox_unchecked');
	}else{
		checkbox.parent('.blg_checkbox_container').addClass('blg_checkbox_checked');
		checkbox.parent('.blg_checkbox_container').removeClass('blg_checkbox_unchecked');		
	}
}

$(document).ready(function(){
	$('input:checkbox.blg_checkbox').click(function(){
		blg_print_checkbox_img($(this));	
	});

	$('span[type=checkbox]').click(function(){
		id= $(this).attr('referer');
		$('#'+id).click();
	});
	
	$('img.blg_checkbox_img').click(function(){
		id= $(this).parent('div.blg_checkbox_container').attr('referer');
		$('#'+id).click();
	});	
	
	$('input.blg_checkbox').css('position', 'absolute');
	$('input.blg_checkbox').css('top', '-9999px');
	$('input.blg_checkbox').css('left', '-9999px');	
});

<?php }
#################################################################
#								CSS
#################################################################
elseif($_CONTEXT=='CSS'){ ?>

div.blg_checkbox_container{
	border: 0px solid red;
	display: inline;
	width: 19px;
	height: 19px;
	cursor: pointer;
}

div.blg_checkbox_unchecked{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/checkbox.png');
	background-position: 0 -2px;
}
div.blg_checkbox_unchecked:hover{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/checkbox.png');
	background-position: 0 -27px;
}
div.blg_checkbox_checked{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/checkbox.png');
	background-position: 0 -52px;
}
div.blg_checkbox_checked:hover{
	background-image: url('<?php echo blg_get_site_url()?>_graphics/default/icons/checkbox.png');
	background-position: 0 -77px;
}

img.blg_checkbox_img{
	width: 19px;
	height: 19px;
}

input.blg_checkbox{
	border: 0px;
}

span.blg_checkbox_label{
	cursor: pointer;
	font-size: 12px;
	padding: 0 0 0 1px;
	position: relative;
	top: -1px;
}

<?php }
